<template>
	<view>
		<u-navbar title="分店調查領取" placeholder autoBack>
			<view class="flexright xiaohui" slot="right">
				<view class="toprightbtn" @click="jumpurl('/pages/workbench/xinzengdc')" v-show="tab_type==1">
					新增
				</view>
			</view>
		</u-navbar>
		<u-sticky bgColor="#fff">
			<view class="flexbetween dingwei">
				<view class="flexcenter " :class="tab_type==item.value?'baisebj':'huangsebj'" v-for="item in toplist"
					:key="item.value" @click="tab_type=item.value;init()"
					style="width: 50%;padding: 15rpx;box-sizing: border-box;">{{item.name}}</view>
			</view>
			<view v-show="tab_type==1">
				<u-tabs :list="tabslist" :scrollable="false" lineColor="#ffb800" @click="changetab" :activeStyle="{
				    color: '#ffb800',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#333333',
							fontWeight: '540',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
			</view>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<template v-if="tab_type==1">
				<view class="mainpadding_top radius shadow dingwei" style="background-color: #fbf6f1;" v-for="item in list.data"
					:key="item.id">
					<view class="checkfocus xiaobai" style="background-color: #999;" v-show="item.status==2">已作廢</view>
					<view class="flexbetween pdl" style="padding-bottom: 10rpx;">
						<view class="flexleft ">
							<view class="margin_right2">
								<image :src="item.image_text" mode="" class="radius"
									style="width: 120rpx;height: 120rpx;min-width: 120rpx;"></image>
							</view>
							<view class="line margin_right2"></view>
							<view>
								<view class="hei_text titletext bold" style="word-break: break-all;">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="flexleft margin_top1">
						<view class="hui_text bold margin_right1" style="font-size: 26rpx;">調查時間</view>
						<view class="hong_text bold " style="font-size: 26rpx;">
							{{http.timereturn(item.dc_starttime*1000)}}~{{http.timereturn(item.dc_endtime*1000)}}</view>
					</view>
					<!-- 全部，已填寫，未填寫
					全部，已領取，未領取 -->
					<view class="flexaround margin_top2">
						<view class="flexcolumn" @click="jumptx(1,item.id)">
							<view class="xiaohei ershib bold">{{item.num_data.all_num}}</view>
							<view class="xiaohui ershib margin_top1">全部</view>
						</view>
						<view class="flexcolumn" @click="jumptx(2,item.id)">
							<view class="xiaohei ershib bold">{{item.num_data.yt_num}}</view>
							<view class="xiaohui ershib margin_top1">已填寫</view>
						</view>
						<view class="flexcolumn" @click="jumptx(3,item.id)">
							<view class="xiaohei ershib bold">{{item.num_data.wt_num}}</view>
							<view class="xiaohui ershib margin_top1">未填寫</view>
						</view>
					</view>
					<view class="flexbetween margin_top2">
						<view class="toprightbtn" style="background-color: #ed4d2d;color: #fff;" @click="jumpdetail('/pages/workbench/diaochatj?id=',item.id)">統計詳情</view>
						<view class="flexright  hei_text main_size bold">
							<view class="flexleft margin_left" v-if="item.status==1" @click="zuofei(item)">
								<u-icon name="cut" color="#999" size="16"></u-icon>
								<view>作廢</view>
							</view>
							<view class="flexleft margin_left" v-if="item.status!=2" @click="shareyh(item)">
								<u-icon name="share" color="#999" size="16"></u-icon>
								<view>分享</view>
							</view>
							<view class="flexleft margin_left" v-if="item.status!=2" @click="jumpdetail('/pages/workbench/xinzengdc?id=',item.id)">
								<u-icon name="edit-pen" color="#999" size="16"></u-icon>
								<view class="xiaohei">编辑</view>
							</view>
							<view class="flexleft margin_left" @click="delitem(item)">
								<u-icon name="trash" color="#999" size="16"></u-icon>
								<view class="xiaohei">刪除</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="tab_type==2">
				<view class="mainpadding_top radius shadow dingwei" style="background-color: #fbf6f1;" v-for="item in list.data"
					:key="item.id">
					<view class="checkfocus xiaobai" style="background-color: #999;" v-show="item.status==4">已作廢</view>
					<view class="flexbetween pdl" style="padding-bottom: 10rpx;">
						<view class="flexleft ">
							<view class="margin_right2">
								<image :src="item.image_text" mode="" class="radius"
									style="width: 120rpx;height: 120rpx;min-width: 120rpx;"></image>
							</view>
							<view class="line margin_right2"></view>
							<view>
								<view class="hei_text titletext bold" style="word-break: break-all;">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="flexleft margin_top1">
						<view class="hui_text bold margin_right1" style="font-size: 26rpx;">領取時間</view>
						<view class="hong_text bold " style="font-size: 26rpx;">
							{{http.timereturn(item.get_starttime*1000)}}~{{http.timereturn(item.get_endtime*1000)}}</view>
					</view>
					<!-- 全部，已填寫，未填寫
					全部，已領取，未領取 -->
					<view class="flexaround margin_top2">
						<view class="flexcolumn" @click="jumplq(1,item.id)">
							<view class="xiaohei ershib bold">{{item.get_num_data.all_num}}</view>
							<view class="xiaohui ershib margin_top1">全部</view>
						</view>
						<view class="flexcolumn" @click="jumplq(2,item.id)">
							<view class="xiaohei ershib bold">{{item.get_num_data.yl_num}}</view>
							<view class="xiaohui ershib margin_top1">已領取</view>
						</view>
						<view class="flexcolumn" @click="jumplq(3,item.id)">
							<view class="xiaohei ershib bold">{{item.get_num_data.wl_num}}</view>
							<view class="xiaohui ershib margin_top1">未領取</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_type: 1,
				toplist: [{
					name: '調查',
					value: 1,
				}, {
					name: '領取',
					value: 2,
				}],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				tabsid: 1,
				tabslist: [{
					name: '未作廢',
					value: 1,
				}, {
					name: '已作廢',
					value: 2,
				}],
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			jumptx(val,id){
				uni.navigateTo({
					url:"/pages/workbench/diaochajl?id="+id+"&tab_type="+val
				})
			},
			jumplq(val,id){
				uni.navigateTo({
					url:"/pages/workbench/lingqujl?id="+id+"&tab_type="+val
				})
			},
			shareyh(item) {
				let that = this
				if (navigator.share) {
					navigator.share({
							title: item.share_tilte,
							text: item.share_tilte,
							url: "https://boss.opos.tw/pages/message/diaochaxq?id=" + item.id, // URL
						})
						.then(() => {
							console.log('分享成功');
						})
						.catch(error => {
							console.error('分享失敗', error);
						});
				} else {
					this.http.toast("當前瀏覽器不支持分享")
				}
			},
			zuofei(item){
				this.http.modal('提示', '確認作廢當前數據嗎？', true, (res) => {
					if (res) {
						this.http.request("/api/Shopwelfarecl/editShopWelfare", 'POST', {
							id: item.id,
							shop_id: uni.getStorageSync("shop_id"),
							status:2,
						}).then(res => {
							if (res.code == 1) {
								this.http.toast("作廢成功")
								this.init()
							} else {
								this.http.toast(res.msg);
							}
						})
					}
				})
			},
			delitem(item) {
				this.http.modal('提示', '確認刪除當前數據嗎？', true, (res) => {
					if (res) {
						this.http.request("/api/Shopwelfarecl/delShopwelfare", 'POST', {
							id: item.id
						}).then(res => {
							if (res.code == 1) {
								this.http.toast("刪除成功")
								this.init()
							} else {
								this.http.toast(res.msg);
							}
						})
					}
				})
			},
			changetab(e) {
				this.tabsid = e.value
				this.init()
			},
			init(isPage, page) {
				let _this = this
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				let url = "/api/Shopwelfarecl/shopwelfareIndex"
				let data = {
					page: page || 1,
					limit: _this.limit,
					shop_id:uni.getStorageSync("shop_id"),
					tab:this.tab_type,
					status:this.tabsid
				}
				if(this.tab_type==2){
					delete data.status
				}
				this.http.request(url, 'GET', data).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					this.http.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>
<style lang="scss" scoped>
	.line {
		width: 2rpx;
		height: 50rpx;
		background-color: #999;
	}

	.all1 {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		padding: 11rpx 38rpx;
		border: 2rpx solid #FF8505;
	}

	.all2 {
		background: #fFF;
		border-radius: 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		padding: 11rpx 38rpx;
		border: 2rpx solid #FF8505;
		border-right: none;
		border-left: none;
	}

	.all3 {
		background: #fFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FF8505;
		padding: 11rpx 38rpx;
		border: 2rpx solid #FF8505;
	}

	.checkall {
		background-color: #FF8505 !important;
		color: #fff !important;
	}

	.baisebj {
		box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.1);
		background-color: rgba(255, 184, 0, 0.3);
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 15rpx !important;
		color: #333;
	}

	.huangsebj {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}
</style>
